<template>
  <div class="total-authorization">
    <div class="total-authorization-title blueTitleStyle betweenbox">
      <div>整站授权</div>
      <div class="select">
        <el-select v-model="totalValue" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.totalValue"
            :label="item.label"
            :value="item.totalValue"
            @selection-change="handleSelectionChange"
          >
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="复选框 A"></el-checkbox>
              <el-checkbox label="复选框 B"></el-checkbox>
              <el-checkbox label="复选框 C"></el-checkbox>
            </el-checkbox-group>
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="total-authorization-content bigTableStyle">
      <el-table
      border
        :data="tableData"
        :row-class-name="tableRowClassName"
        style="width: 100%"
        height="100%"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.5)"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" width="55" label="序号"></el-table-column>
        <el-table-column prop="stationName" label="变电站名称" width="160" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="area" label="区域房间" width="190">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.areaArr"
              multiple
              collapse-tags
              placeholder="请选择"
              @change="getAccessByArea(scope)"
            >
              <el-option
                v-for="item in getAreaOption(scope.row.areaId,scope.row.area)"
                :key="item.value"
                :label="item.name"
                :value="item.value"
                collapse-tags
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="access" label="门禁" width="160" :show-overflow-tooltip="true">
          <!-- <template slot-scope="scope">
            <div>{{scope.row.access}}</div>
          </template> -->
        </el-table-column>
        <el-table-column prop="insertStatus" label="操作" width="120">
          <template slot-scope="scope">
            <el-button disabled class="btn" type="primary" v-if="scope.row.insertStatus">已添加</el-button>
            <el-button class="btn" type="primary" @click="addRecord(scope.row)" v-else>添加</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { objType } from "@/utils/interface";
@Component
export default class TotalAuthorization extends Vue {
  // 全部
  options: Array<object> = [
    {
      totalValue: "1",
      label: "全部",
    },
    {
      totalValue: "选项2",
      label: "双皮奶",
    },
    {
      totalValue: "选项3",
      label: "蚵仔煎",
    },
    {
      totalValue: "选项4",
      label: "龙须面",
    },
    {
      totalValue: "选项5",
      label: "北京烤鸭",
    },
  ];
  roomOptions: Array<object> = [
    {
      value: "1",
      label: "设备室大门1",
    },
    {
      value: "2",
      label: "设备室大门2",
    },
    {
      value: "3",
      label: "设备室大门3",
    },
  ];
  totalValue: string = "1";
  value1: Array<any> = [];
  checkList: Array<string> = ["复选框 A"];
  //   表格
  tableData = [];
  loading: boolean = true;

  mounted() {
    this.fetch();
  }
  // 1.整站授权-查询
  fetch() {
    var params = {
      stationId: "",
    };
    (this as any).$services
      .getKeyPassStationList({ data: params })
      .then((res: any) => {
        // console.log(res.data);
        if (res.data) {
          res.data.map((k, j) => {
            k["areaArr"] = k.areaId.split(",");
            return k;
          });
          this.tableData = res.data;
          this.loading = false;
        }
      })
      .catch((err: object) => {
        console.log(err);
        this.loading = false;
      });
  }
  // 区域id的下拉框
  getAreaOption(id, name) {
    var idArr = id.split(",");
    var nameArr = name.split(",");
    return idArr.map((k, i) => {
      return {
        name: nameArr[i],
        value: k,
      };
    });
  }

  // 2.根据区域id获取门禁内容
  getAccessByArea(scope) {
    // console.log(1111111111, scope);
    var params = {
      areaId: scope.row.areaArr,
    };
    (this as any).$services
      .getAccessByArea({ data: params })
      .then((res: any) => {
        // console.log(res.data);
        this.tableData[scope.index].accessName = res.data;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  // 3.整站授权-添加操作
  addRecord(row: any) {
    // console.log(row);
    var params = {
      stationId: row.stationId,
      accessId: row.accessId,
      accessName: row.accessName,
      keyId: "",
      objId: "",
      insertStatus: 1,
    };
    (this as any).$services
      .insertData({ data: params })
      .then((res: any) => {
        // console.log(res.data);
        if (res.data) {
          this.$emit("handleAddRecord");
          this.$message({
            type: "success",
            message: res.message,
          });
        }
      })
      .catch((err: object) => {
        console.log(err);
        this.loading = false;
      });
  }

  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  multipleSelection: any = [];
  handleSelectionChange(val: any) {
    this.multipleSelection = val;
  }
}
</script>

<style lang="scss" scoped>
.total-authorization {
  width: 100%;
  height: 100%;
  &-title {
    width: 100%;
    height: 0.26rem;
  }
  &-select {
    height: 0.26rem;
  }
  &-content {
    width: 100%;
    height: calc(100% - 0.4rem);
    padding: 0.2rem 0.1rem;
    box-sizing: border-box;
    overflow: auto;
    .btn {
      width: 1rem;
    }
  }
}
</style>
<style lang="scss">
.total-authorization {
  .el-select .el-input .el-input__inner {
    width: 1.69rem;
    height: 0.26rem;
    line-height: 0.26rem;
  }
}
</style>